<template>
  <div class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="修改基本信息" name="first">
        <el-form :model="form" :rules="rules" label-width="100px" size="small" ref="form">
          <el-form-item label="用户名" prop="name">
            <el-input class="input-w" placeholder="请输入用户名" v-model="form.name" disabled></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input class="input-w" placeholder="请输入邮箱" v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item class="dialog-footer">
            <!--<div slot="footer">-->
            <!--<el-button @click="goBack">返 回</el-button>-->
            <el-button type="primary" @click="submit('form')">确 定</el-button>
            <!--</div>-->
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="修改密码" name="second">
        <el-form :model="formm" size="small" ref="formm" :rules="ruless" class="password-form-container" label-width="100px">
          <el-form-item size="small" label="旧密码" prop="oldPassword">
            <el-input size="small" type="password" auto-complete="off" class="shop-form-input" v-model="formm.oldPassword" placeholder="请输入旧密码"></el-input>
          </el-form-item>
          <el-form-item size="small" label="新密码" prop="newPassword">
            <el-input size="small" type="password" auto-complete="off" class="shop-form-input" v-model="formm.newPassword" placeholder="请输入新密码"></el-input>
          </el-form-item>
          <el-form-item size="small" label="确认密码" prop="rePassword">
            <el-input size="small" type="password" auto-complete="off" class="shop-form-input" v-model="formm.rePassword" placeholder="请重复新密码"></el-input>
          </el-form-item>
          <el-form-item class="dialog-footer">
            <el-button type="primary" @click="submitForm('formm')">确 认</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import axios from 'axios'
  import { getUserInfo, changeGetUserInfo, changePassword } from '../../../api/index'

  export default {
    data() {
      const validatePass1 = (rule, value, callback) => {
        if (this.formm.rePassword) {
          this.$refs['formm'].validateField('rePassword')
        }
        callback()
      }
      const validatePass2 = (rule, value, callback) => {
        if (value !== this.formm.newPassword) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback()
        }
      }
      return {
        activeName: 'first',
        titleOptions: [
          { key: 1, value: '设计师' },
          { key: 2, value: '高级设计师' },
          { key: 3, value: '首席设计师' },
          { key: 4, value: '设计总监' }
        ],
        form: {
        },
        qiniuUrl: 'http://pe0c33epi.bkt.clouddn.com/',
        uploadData: {
          token: '',
          key: ''
        },
        coverImg: {},
        background: {},
        rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' }
          ],
          title: [
            { required: true, message: '请填写职称', trigger: 'blur' }
          ],
          working_age: [
            { required: true, message: '请选择', trigger: 'change' }
          ]
        },
        formm: {},
        ruless: {
          oldPassword: [
            { required: true, message: '请输入旧密码', trigger: 'blur' },
            { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
          ],
          newPassword: [
            { required: true, message: '请输入新密码', trigger: 'blur' },
            { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
            { validator: validatePass1, trigger: 'blur' }
          ],
          rePassword: [
            { required: true, message: '请输入确认密码', trigger: 'blur' },
            { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
            { validator: validatePass2, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      handleCoverSuccess(res, file) {
        file.url = this.qiniuUrl + res.key
        this.coverImg = file
        // console.log(file)
      },
      handleCoverSuccessBackground(res, file) {
        file.url = this.qiniuUrl + res.key
        this.background = file
        // console.log(file)
      },
      beforeCoverUpload(file) {
        if (this.beforeUploadValidate(file)) {
          return axios({
            method: 'get',
            url: 'https://sjh.xmmost.com/api/qiniu/token',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            console.log(res)
            this.uploadData = {
              key: res.data.data.key,
              token: res.data.data.token
            }
            // console.log(this.uploadData)
            this.form.avatar = this.uploadData.key
          })
        } else {
          return false
        }
      },
      beforeCoverUploadBackground(file) {
        if (this.beforeUploadValidate(file)) {
          return axios({
            method: 'get',
            url: 'https://sjh.xmmost.com/api/qiniu/token',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            console.log(res)
            this.uploadData = {
              key: res.data.data.key,
              token: res.data.data.token
            }
            // console.log(this.uploadData)
            this.form.background_image = this.uploadData.key
          })
        } else {
          return false
        }
      },
      beforeUploadValidate(file) {
        if (!file.type.startsWith('image')) {
          this.$message({ message: '仅支持图片格式文件', type: 'warning' })
          return false
        }
        if (file.size > 1024 * 1024 * 2) {
          this.$message({ message: '图片大小不能超过2MB', type: 'warning' })
          return false
        }
        return true
      },
      getInfo() {
        getUserInfo().then(res => {
          console.log(res, 223)
          this.form = res.currUser
        })
      },
      goBack() {
        this.$router.go(-1)
      },
      submitForm(formName) {
        console.log(this.formm)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            changePassword(this.formm).then(res => {
              this.$message({ type: 'success', message: '修改成功' })
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      submit(formName) {
        console.log(this.form)
        const params = {
          id: this.form.id,
          email: this.form.email
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            changeGetUserInfo(params).then(res => {
              console.log(res)
              this.$message({ type: 'success', message: '修改成功' })
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    },
    mounted() {
      this.getInfo()
    }
  }
</script>
